<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" href="../js/bootstrap3/css/bootstrap.min.css">
<link rel="stylesheet" href="../js/bootstrap-table/bootstrap-table.min.css">
<link rel="stylesheet" href="../js/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="../js/bootstrap-dialog/dist/css/bootstrap-dialog.min.css">
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="../js/bootstrap3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
<script type="text/javascript" src="../js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript" src="../js/bootstrap-bootbox/bootbox.js"></script>
<script type="text/javascript" src="../js/bootstrap-dialog/dist/js/bootstrap-dialog.min.js"></script>
<body>

    <a th:href="@{../demo/toAdd}">添加</a>
    <div id="myTable"></div>

</body>
<script>

    $(function (){
        initTable();
    })

    function initTable(){
        $("#myTable").bootstrapTable({
            url:"../demo/queryDemoList",
            pagination: true,               //是否显示分页（*）
            pageNumber:1,                   //初始化加载第一页，默认第一页
            pageSize: 3,                    //每页的记录行数（*）
            pageList: [3, 5, 7, 9],         //可供选择的每页的行数（*）
            method: 'get',                  //访问请求方式  get post
            smartDisplay: false,            //设置显示分页列表
            clickToSelect: true,            //点击行即可选中单选/复选框
            sidePagination: "server",       // 表格分页的是客户端分页还是服务端分页  cilent/server
            queryParams:function(){

                return {
                    page:this.pageNumber,
                    rows:this.pageSize

                }
            },

            columns: [{
                checkbox:true
            },{
                field:"demoid",
                title:"编号"
            },{
                field: "demoname",
                title: "名称"
            },{
                field: "demoimg",
                title: "图片",
                formatter:function (value,row,index){
                    return "<img src='"+value+"' alt='图片丢失了' width='100px' height='100px'/>";
                }
            },{
                field: "demodouble",
                title: "价格"
            },{
                field: "demodate",
                title: "时间"
            },{
                field: "demoarea",
                title: "文本域",
                formatter:function (value,row,index){
                    return "<texearea>"+value+"</texearea>";
                }
            },{
                field: "demostatus",
                title: "状态",
                formatter:function (value,row,index){
                    return value==1?"可用":"不可用";
                }
            },{
                field: "1",
                title: "操作",
                formatter:function(value,row,index){
                    return '<input type="button"  class="btn btn-sm btn-danger" onclick="delDemo('+row.demoid+')" value="删除">'
                        +  '<input type="button"  class="btn btn-sm btn-warning" onclick="toUpdate('+row.demoid+')" value="修改">';
                }
            }]
        })
    }

    //去修改
    function toUpdate(demoid){
        location.href="../demo/queryDemoById?demoid="+demoid;
    }

    //删除
    function delDemo(demoid){
        //alert(demoid);
        $.ajax({
            url: "../demo/deleteDemo?demoid="+demoid,
            type: "post",
            success:function (data){
                alert("删除成功！");
                location.href="../demo/show";
            },error:function(){
                alert("删除失败！");
            }
        })
    }

</script>
</html>